<template>
  <section class="service-section">
    <div class="section-container">
      <h2 class="section-title">版权服务</h2>
      <div class="service-grid">
        <service-card
          v-for="service in services"
          :key="service.id"
          v-bind="service"
        />
      </div>
    </div>
  </section>
</template>

<script>
import { defineComponent } from 'vue';
import ServiceCard from './ServiceCard.vue';

export default defineComponent({
  name: 'ServiceSection',
  components: {
    ServiceCard
  },
  setup() {
    const services = [
      {
        id: 1,
        icon: 'Document',
        title: '版权存证',
        description: '基于区块链技术的版权存证服务，为您的作品提供法律保护',
        link: '/copyright/evidence'
      },
      {
        id: 2,
        icon: 'Collection',
        title: '版权登记',
        description: '快速便捷的版权登记服务，保护您的知识产权',
        link: '/copyright/register'
      },
      {
        id: 3,
        icon: 'Monitor',
        title: '传播监测',
        description: '全网监测您的作品传播情况，及时发现侵权行为',
        link: '/copyright/monitor'
      },
      {
        id: 4,
        icon: 'Search',
        title: '电子取证',
        description: '专业的电子取证服务，为维权提供有力证据',
        link: '/copyright/evidence-collection'
      },
      {
        id: 5,
        icon: 'Shield',
        title: '在线维权',
        description: '一站式维权服务，维护您的合法权益',
        link: '/copyright/rights-protection'
      },
      {
        id: 6,
        icon: 'Check',
        title: '证据核验',
        description: '权威的证据核验服务，确保证据的真实性和有效性',
        link: '/copyright/evidence-verification'
      }
    ];

    return {
      services
    };
  }
});
</script>

<style scoped lang="scss">
.service-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
}

.section-container {
  max-width: $container-width;
  margin: 0 auto;
  padding: 0 $spacing-base;
}

.section-title {
  text-align: center;
  font-size: $font-size-extra-large;
  color: $text-primary;
  margin-bottom: $spacing-extra-large;
  font-weight: 500;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: $spacing-large;
}

@media screen and (max-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}
</style>
  